import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './assets/css/modifyAntd.less';
import {Redirect, Route, Switch} from 'react-router-dom';

import SiderMain from './components/SiderMain';
import HeaderMain from './components/HeaderMain';

import MIndex from './page/index';
import Swiper from './page/swiper/Swiper';
import Echart from './page/echart/Echart';
import Select from './page/select/Select';
import Redux from './page/redux/Redux';
import HttpServer from './page/httpServer/index';

import { Layout, } from 'antd';
const { Footer, Content} = Layout;



class App extends Component {
  state = {
    collapsed: localStorage.getItem("mspa_SiderCollapsed") === "true",
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    }, function () {
      localStorage.setItem("mspa_SiderCollapsed", this.state.collapsed);
    });
  };

  // constructor(props) {
  //   super(props);
  // }
  render() {

    // const {collapsed} = this.state;
    // const {location} = this.props;
    // let name;
    if (localStorage.getItem("mspa_user") === null) {
        return <Redirect to="/login"/>
    } else {
        // name = location.state === undefined ? JSON.parse(localStorage.getItem("mspa_user")).username : location.state.username;
    }
    return (
      <div className="App">
        <Layout style={{height: '100%'}}>
          <SiderMain />
          {/* <Sider>Sider</Sider> */}
          <Layout>
            <HeaderMain />
            {/* <Header>Header</Header> */}
            <Content className="show-main">
              <Switch>
                <Route exact path={'/app'} component={MIndex} />
                <Route exact path={'/app/swiper'} component={Swiper} />
                <Route exact path={'/app/echart'} component={Echart} />
                <Route exact path={'/app/select'} component={Select} />
                <Route exact path={'/app/redux'} component={Redux} />
                <Route exact path={'/app/http'} component={HttpServer} />
              </Switch>
            </Content>
            <Footer>Footer</Footer>
          </Layout>
        </Layout>

        <header className="App-header" style={{display: 'none'}}>
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro" style={{color: '#f00', display: 'none'}}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;
